<template>
  <div class="search-page">
    <!-- <search @on-cancel="$router.back(-1)" :auto-fixed="false" placeholder="请输入关键词"></search> -->
    <div class="my-head">
    <search
      @result-click="resultClick"
      @on-change="getResult"
      placeholder="请输入关键词"
      :results="results"
      v-model="value"
      @on-focus="onFocus"
      @on-cancel="$router.go(-1)"
      @on-submit="onSubmit"
      ref="search">
    </search>
    </div>
    <group id="searchBox" v-if="remarkList.length && isShowRecord">
      <cell v-for="(item,i) in remarkList" :key="i" v-show="i<myIndex"
       :title="item" @click.native="searchItem(item,i)">
        <i class="icon-3lishi" slot="icon"></i>
        <i class="icon-remove" @click.stop="removeSearchItem(i)"></i>
      </cell>
      <div v-if="myIndex===2&&remarkList.length>2" class="show-search" @click="myIndex=remarkList.length">展开全部搜索记录</div>
      <div v-if="myIndex>2&&remarkList.length>2" style="color:red;" class="show-search" @click="handleShowSearch">清除全部搜索记录</div>
    </group>
    <!-- <scroller :noDataText="noDataText" :on-refresh="refresh" :on-infinite="infinite" style="padding-top:93px;min-height: 500px;padding-bottom: 80px;" ref="my_scroller"> -->
    <item-list :datalist="list" @remove="handleRemove" @focusman="handleFocusman" :hasLikeArr="[]" :hasAttenArr="[]"></item-list>
    <!-- </scroller> -->
    <actionsheet
      v-model="showConfirm"
      :menus="cacelList"
      show-cancel
      @on-click-menu="clickMenu">
    </actionsheet>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import ItemList from '@/views/common/Item';
import {
  Icon,
  Group,
  Actionsheet,
  Cell,
  Search
} from 'vux';
const ListStore = namespace('list');
const HomeStore = namespace('home');
@Component({
  components: {
    ItemList,
    Icon,
    Actionsheet,
    Group,
    Cell,
    Search
  }
})
export default class SubmitPage extends Vue {
  @HomeStore.Action getUnWatchPost;
  @HomeStore.Action getSaveCollect;
  @ListStore.Action getSearchPostList;
  @ListStore.State searchPostList;
  userInfo = (localStorage.getItem('loginInfo') && JSON.parse(localStorage.getItem('loginInfo')).user) || ''
  myIndex = 2
  status = false
  showConfirm = false
  isShowRecord = true
  currentItem = null
  results = []
  value = ''
  id = null
  list = []
  total = 0
  remarkList = []
  myTime = new Date()
  cacelList = {
  	0: '不再看到此条帖子',
  	1: '收藏',
    2: '举报'
    // 3: '不看此人'
  }
  created () {
    this.list = []
  }
  getResult (val) {
    // this.results = val ? getResult(this.value) : []
  }
  resultClick (item) {
    // window.alert('you click the result item: ' + JSON.stringify(item))
  }
  clickMenu (key, value) {
    if (key === '2') {
      const { creator, _id } = this.currentItem
      const info = {
        _id,
        creator,
        type: 'post'
      }
      this.$router.push({
        path: `/report`,
        query: {
          info
        }
      })
    }
    if (key === '1') {
      const params = {
        postId: this.id,
        userId: this.userInfo._id
      }
      this.getSaveCollect(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.$vux.toast.text('收藏成功', 'middle');
        }
      })
    }
    if (key === '0') {
      const params = {
        postId: this.id
      }
      this.getUnWatchPost(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.$vux.toast.text('已不再看到此帖子', 'middle');
        }
      })
    }
  }
  handleShowSearch () {
    localStorage.setItem('searchList', '')
    this.isShowRecord = false
  }
  // noDataText = '--我也是有底线的--'
  // infinite () {
  //   this.getSearchList()
  //   this.currentPage++
  //   setTimeout(() => {
  //     this.$refs.my_scroller.finishInfinite(true)
  //   }, 1000)
  // }
  // refresh () {
  //   this.myTime = new Date()
  //   setTimeout(() => {
  //     this.list = []
  //     this.currentPage = 1
  //     this.$refs.my_scroller.finishPullToRefresh()
  //   }, 1000)
  // }
  handleFocusman (item) {
    const params = {
      status: 0,
      user2Obj: item.creator
    }
    this.getWatchUser(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.$vux.toast.text('关注成功', 'middle');
      }
    })
  }
  handleRemove (item) {
    this.currentItem = item
    this.id = item._id
    this.showConfirm = true
  }
  onFocus () {
    this.value = ''
  }
  onSubmit () {
    this.getSearchList(this.value)
  }
  getSearchList (value) {
    this.isShowRecord = false
    const params = {
      keyword: value,
      type: Number(this.$route.query.id)
      // current: this.currentPage,
      // pageSize: this.pageSize,
      // createTime: getUnixTime(this.myTime)
    }
    this.getSearchPostList(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.remarkList.unshift(value);
        localStorage.setItem('searchList', JSON.stringify(this.remarkList))
        const { list } = this.searchPostList
        this.list = list
      }
    })
  }
  searchItem (value, i) {
    this.value = value
    this.getSearchList(value)
    // this.getSearchList(value)
  }
  removeSearchItem (index) {
    this.remarkList.splice(index, 1)
    localStorage.setItem('searchList', JSON.stringify(this.remarkList))
  }
  noReapt (arr) {
    for (let i = 0; i < arr.length; i++) {
      if (arr.indexOf(arr[i]) !== i) {
        arr.splice(i, 1)
        i--
      }
    }
    return arr
  }
  mounted () {
    let arr = JSON.parse(localStorage.getItem('searchList') || '[]')
    this.remarkList = this.noReapt(arr.filter(v => v))
  }
}
</script>
<style lang="less">
  .search-page {
    padding-top: 48px;
    .weui-search-bar__box .weui-search-bar__input {
      padding-left: 6px !important;
    }
    .icon-3lishi, .icon-remove {
      color: #B2B2B2;
    }
    .show-search {
      text-align: center;
      line-height: 44px;
      // font-size: 12px;
    }
    .weui-cell:before {
      content: initial;
    }
    .weui-search-bar__form:after {
      border: none;
    }
    .weui-search-bar {
      background: #ffffff;
    }
    .vux-x-icon {
      fill: #B2B2B2;
    }
    .weui-cell .weui-icon-search {
      line-height: 5px;
    }
    .vux-label {
      padding-left: 10px;
      font-size: 14px;
    }
    .weui-cell__ft {
      line-height: 10px;
    }
    .vux-search-box {
      position: absolute !important;
      width: 100%;
      top: 0;
      left: 0;
    }
    #searchBox {
      width: 100%;
    }
    .my-head {
      z-index: 1;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      .history {
        line-height: 30px;
        padding-left: 10px;
        background: #EFEFF4;
      }
    }
    .vux-search-box {
      position: initial !important;
    }
    .weui-search-bar:before {
      content: initial;
    }
    .weui-search-bar:after {
      content: initial;
    }
    .weui-cells:before {
      content: initial;
    }
    .weui-cells:after {
      content: initial;
    }
    .weui-cells {
      margin-top: 0;
    }
  }
</style>
